<template>
    <div id="chen">
        <div class="container">
            <div class="top">
                <h1>金融行业数据可视化</h1>
            </div>
            <div class="one">
                <two :loan="loan"/>
            </div>
            <div class="two">
                <one/>
            </div>
            <div class="three">
                <three :table="table"/>
            </div>
            <div class="four">
              <four></four>
            </div>
            <div class="five">
              <div class="fiveBox">
                <five></five>
              </div>
              <div class="fiveBox">
                <six></six>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import two from '../chen/chenOne/two.vue'
import one from '../chen/chenOne/one.vue'
import three from '../chen/chenOne/three.vue'
import four from '../chen/chenOne/four.vue'
import five from '../chen/chenOne/five.vue'
import six from '../chen/chenOne/six.vue'
export default {
  data () {
    return {
      loan: [{
        title: '累计贷款总额',
        quantity: '910,234',
        company: '万'
      }, {
        title: '到期借款总额',
        quantity: '10,035',
        company: '万'
      }, {
        title: '今日还款总额',
        quantity: '8,000',
        company: '万'
      }, {
        title: '逾期未还本金',
        quantity: '1,024',
        company: '万'
      }, {
        title: '逾期率',
        quantity: '12.74',
        company: '%'
      }, {
        title: '坏账率',
        quantity: '5.35',
        company: '%'
      }],
      table: [{
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '2',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '3',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }, {
        serialNumber: '1',
        organization: '北京总部',
        department: '市场部',
        business: '第一小...',
        name: '张三',
        quota: '12345'
      }]
    }
  },
  components: {
    one, two, three, four, five, six
  }
}
</script>

<style lang="less" scoped>
#chen {
    width: 100%;
    height: 100%;
    background: url('../../assets/img/background.png');
    padding: 20px;
    // 容器
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow:hidden;
        // 头部
        .top {
            text-align: center;
            color: #dcd5b9;
            h1 {
                font-size: 45px;
            }
        }
        .one {
            margin-top: 40px;
        }
        .two {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    }
    .five {
          display: flex;
          color: #fff;
          width: 1000px;
          .fiveBox {
            width: 495px;
            height: 352px;
            box-sizing: border-box;
            border-image-source: url(../../assets/img/border-121-0f05f2ce15011b2a.png);
            border-width: 14px;
            border-image-slice: 14 fill;
            border-style: solid;
            background-clip: padding-box;
          }
          .fiveBox:last-of-type{
            margin-left: 10px;
          }
        }
}
</style>